<template>
  <div class="law-details">
    <h1 style="">{{ title }}</h1>

    <div class="background-content">--</div>

    <div v-for="(item, index) in readerDate" :key="index">
      <h1>{{ item.title }}</h1>

      <ul>
        <li v-for="(subitem, subindex) in item.list" :key="subindex">
          <template v-if="subitem.type === '1'">
            {{ subitem.content }}
          </template>
          <template v-if="subitem.type === '2'">
            <el-image
              style="width: 500px"
              :src="item.content"
              :preview-src-list="[item.content]"
            >
            </el-image>
          </template>
          <template v-if="subitem.type === '3'">
            <a :href="item.content"></a>
          </template>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import ComCard from "../../../components/comCard.vue";
import { getTypteCatgoryApi } from "@/wss/api/contentTemplate";
import { getDetailQuetionApi } from "@/wss/api/question";

export default {
  props: {},
  components: { ComCard },
  data() {
    return {
      title: "",
      itemDetails: {},
      contentList: [],
      readerDate: [],
    };
  },
  async mounted() {
    let Catgoryresult = await getTypteCatgoryApi({
      no: this.$route.query.no,
      type: this.$route.query.type,
    });
    // console.log(result, "结果");
    console.log(Catgoryresult);
    Catgoryresult.data.forEach((item) => {
      this.readerDate.push({ title: item.type + "/ " + item.english });
    });
    // 防止没有数据
    if (!Catgoryresult.data[0]) {
      return;
    }

    let detailResult = await getDetailQuetionApi({
      id: this.$route.query.esId,
    });
    console.log(this.readerDate);
    this.readerDate[0].list = detailResult.data.answer;
    console.log(this.readerDate);
    this.itemDetails = this.$route.query;

    this.title = detailResult.data.title;
  },
};
</script>

<style lang="scss" scoped>
.law-details {
  padding: 20px;

  .breadcrumbBox {
    height: 50px;
  }
  .tableBox {
    display: flex;
    height: 200px;
    justify-content: space-evenly;
    .title {
      height: 20%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .item {
      text-align: center;
      width: 200px;
      border: 1px #cccc solid;
      height: 100%;
    }
    .item:nth-child(2),
    .item:nth-child(3) {
      flex: 10;
    }
    .content {
      height: 80%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .background {
    margin-top: 20px;
    margin-bottom: -4px;
    .background-content {
      padding-top: 30px;
      height: 100px;
    }
  }
  ul {
    padding: 0px;
  }
  li {
    list-style: none;
    margin: 20px 0px;
    font-size: 12px;
  }
}
</style>